<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流程图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    .wrapper {
      display: flex;
      flex-direction: row;
      width: 100vw;
      height: 100vh;
    }

    #item_left {
      width: 150px;
      border-right: 1px solid #ccc;
    }

    #item_right {
      flex: 1;
      height: 100%;
    }

    .item_url {
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      padding-left: 3px;
      border-bottom: 1px solid #ccc;
    }

    .item_url.active,
    .item_url:hover {
      background-color: blue;
      color: #fff;
    }

    #iframe_el {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="item_left"></div>
    <div id="item_right">
      <iframe src="" id="iframe_el" frameborder="0"></iframe>
    </div>
  </div>

  <script>
    const pageList = [
      '02-antvx6',
      '03-bpmn',
      '04-layoutexample',
      '05-autolayout',
      '06-mutinode',
      '07-addNode',
      '08-autoLayout',
      '10-nodeRender',
      '12-edgeanimate',
      '13-animate',
      '14-bottom',
      '15-小球动画',
      '11-add',
    ];
    let active_index = pageList.length - 1;
    document.getElementById('iframe_el').src = `./${pageList[active_index]}.html`;

    for (let i = 0; i < pageList.length; i++) {
      let page = pageList[i];
      let div = document.createElement('div');
      div.innerText = page;
      div.classList.add('item_url');
      div.setAttribute('data-index', i);
      if (i == active_index) {
        div.classList.add('active');
      }
      document.getElementById('item_left').appendChild(div);
    }
    document.getElementById('item_left').addEventListener('click', function (e) {
      if (e.target.classList.contains('item_url')) {
        const curIndex = e.target.dataset.index;
        document.getElementById('iframe_el').src = `./${pageList[curIndex]}.html`;
        document.querySelector('.active').classList.remove('active');
        document.querySelector(`.item_url[data-index="${curIndex}"]`).classList.add('active');
      }
    })
  </script>
</body>

</html>